<template>
  <div class="online-booking">
    <div class="recovery-detail">
      <div class="title">
        回收详情
      </div>
      <div class="content">
        <span v-if="categoryList.length == 0"
          >请添加可回收物的种类，重量信息,以方便平台工作人员更好的服务本次订单。</span
        >
        <ul class="category-list" v-if="categoryList.length != 0">
          <li v-for="(item, index) in categoryList" :key="index">
            <span>{{ item.categoryName }}</span>
            <span>{{ item.weight }}</span>
            <span @click="removeCategory($event, index)"
              ><img src="../assets/img/删除.png" alt=""
            /></span>
          </li>
        </ul>
      </div>
      <button @click="addCategory">添加</button>
    </div>

    <div class="add-address" @click="addAddress">
      <span>添加地址</span>
      <span
        ><span>{{ addressInfo }}</span
        ><img src="../assets/img/更多拷贝@2x.png" alt=""
      /></span>
    </div>
    <div class="recovery-time" @click="dateClick">
      <span>预约时间</span>
      <span>
        <span>{{ time }}</span>
        <img src="../assets/img/更多拷贝@2x.png" alt="" />
      </span>
    </div>
    <div class="contacts">
      <span>联系人</span>
      <span
        ><span
          ><input
            type="text"
            v-model="orderParams.consignee"
            placeholder="请添加联系人"/></span
        ><img src="../assets/img/更多拷贝@2x.png" alt=""
      /></span>
    </div>
    <div class="contact-number">
      <span>联系电话</span>
      <span
        ><span>
          <input
            type="text"
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model="orderParams.mobile"
            placeholder="请添加联系电话"
          />
        </span>

        <img src="../assets/img/更多拷贝@2x.png" alt=""
      /></span>
    </div>
    <div class="remarks">
      <textarea
        name=""
        placeholder="可以描述物品状态，特殊要求(最多120字)"
        maxlength="120"
        id=""
        cols="30"
        rows="10"
        v-model="orderParams.memo"
      ></textarea>
    </div>
    <div class="upload-file">
      <!-- <input type="file" /> -->
      <a href="javascript:void(0)" class="btn" v-if="show">
        <span class="add-img">
          <img src="../assets/img/添加@2x.png" alt="" />
          <span>添加图片</span>
        </span>
        <input
          type="file"
          accept="image/*"
          capture="camera"
          id="file"
          name="file"
          @change="uploadFile"
        />
      </a>
      <div class="show-img" v-if="!show">
        <img :src="src" alt="" />
        <span class="after" @click="removeFile"
          ><img src="../assets/img/图片关闭@2x.png" alt=""
        /></span>
      </div>
    </div>
    <div class="btn">
      <button @click="save">确认提交</button>
    </div>
    <!-- 预约时间弹出框 -->
    <mt-popup v-model="popupVisible" position="bottom">
      <!-- <div class="picker-toolbar">
        <span class="mint-datetime-cancel" @click="cancel">取消</span>
        <span class="mint-datetime-confirm" @click="confirm">确定</span>
      </div> -->
      <div class="picker-toolbar">
        <span>预约时间</span>
        <img @click="close" src="../assets/img/关闭@2x.png" alt="" />
      </div>
      <!-- 上下滑动内容 -->
      <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
      <div class="button">
        <button @click="save1">确认</button>
      </div>
    </mt-popup>
    <!-- 预约时间弹出框 -->

    <!-- 添加回收详情弹出框 -->
    <mt-popup v-model="popupVisible1" position="bottom">
      <div class="picker-toolbar">
        <span>添加回收详情</span>
        <img @click="close1" src="../assets/img/关闭@2x.png" alt="" />
      </div>
      <div class="categorys" @click="categoryNameClick">
        <span class="current">塑料</span>
        <span>金属</span>
        <span>纺织</span>
        <span>玻璃</span>
        <span>纸类</span>
        <span>其他</span>
      </div>
      <div class="weight">
        <div class="weight-grids" @click="categoryWeightClick">
          <span class="current">0-5kg</span>
          <span>5-10kg</span>
          <span>10-15kg</span>

          <span>15-20kg</span>
          <span>20kg以上</span>
          <!-- <span>其他</span> -->
        </div>
      </div>
      <div class="button">
        <button @click="confirmCategory">确认</button>
      </div>
    </mt-popup>
    <!-- 添加回收详情弹出框 -->
  </div>
</template>
<script>
import { openid } from "../config";
export default {
  methods: {
    removeFile() {
      this.src = "";
      this.show = true;
    },
    uploadFile(file) {
      this.$indicator.open({
        text: "图片上传中...",
        spinnerType: "fading-circle",
      });
      var target = file.target || file.srcElement;
      console.log(target.files[0]);
      var formdata = new FormData();
      formdata.append("file", target.files[0]);
      console.log("文件对象", formdata.get("file"));
      this.$axios
        .post("/order/recycleOrder/upload", formdata, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.code != 0) {
            // 解决input file上传同一个文件时onChange事件只触发一次问题
            target.value = null;
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500,
            });
          }
          target.value = null;
          // this.src = "http://static.xingfeng.cool/images/Dogembracesfish-0.jpg"; // 测试
          this.src = res.data.src;
          this.orderParams.imageUrl = this.src;
          this.show = false;

          this.$indicator.close();
        })
        .catch(() => {});
    },
    // 添加地址
    addAddress() {
      this.$router.push({
        name: "AddressList",
      });
    },

    addCategory() {
      this.popupVisible1 = true;
    },
    categoryNameClick(e) {
      console.log(e);
      var target = e.target || e.srcElement;
      var parentEle = target.parentElement;
      var children = parentEle.children;
      for (var item of children) {
        item.classList.remove("current");
      }
      target.classList.add("current");
      this.categoryName = target.innerHTML;
    },
    removeCategory(e, index) {
      console.log(e, index);
      this.categoryList.splice(index, 1);
      this.orderParams.recycleDetails.splice(index, 1);
    },
    save() {
      if (
        this.categoryList.length == 0 ||
        this.orderParams.addressId == "" ||
        this.orderParams.startDate == "" ||
        this.orderParams.consignee == "" ||
        this.orderParams.mobile == ""
      ) {
        return this.$toast({
          message: "必填项不能留空",
          position: "middle",
          duration: 1500,
        });
      }
      if (
        !/^[1]([3-9])[0-9]{9}$/.test(this.orderParams.mobile) ||
        /0\d{2,3}-\d{7,8}/.test(this.orderParams.mobile)
      ) {
        return this.$toast({
          message: "请正确填写电话!",
          position: "middle",
          duration: 1500,
        });
      }
      this.$messagebox({
        title: "提示",
        message: "确认提交吗?",
        showCancelButton: true,
      }).then((action) => {
        if (action == "confirm") {
          //确认的回调
          this.succCallback();
        }
      });
    },
    succCallback() {
      this.$axios
        .post("/order/recycleOrder", {
          openid: this.orderParams.openid,
          recycleDetails: this.orderParams.recycleDetails,
          imageUrl: this.orderParams.imageUrl,
          consignee: this.orderParams.consignee,
          mobile: this.orderParams.mobile,
          addressId: this.orderParams.addressId,
          memo: this.orderParams.memo,
          startDate: this.orderParams.startDate,
          endDate: this.orderParams.endDate,
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500,
            });
          }
          this.$router.replace({
            path: "/order-detail",
            query: {
              id: res.data.orderId,
              a: "add",
            },
          });

          this.clear();
        })
        .catch(() => {});
    },
    clear() {
      this.orderParams = {
        openid,
        recycleDetails: [],
        imageUrl: "",
        consignee: "",
        mobile: "",
        addressId: "",
        memo: "",
        startDate: "",
        endDate: "",
      };
      this.categoryList = [];
      this.addressInfo = "";
      this.startTimeStamp = "";
      this.endTimeStamp = "";
      this.src = "";
      this.show = true;
      this.time = "";
    },
    save1() {
      console.log(1111);
      this.popupVisible = false;
      this.orderParams.startDate = this.startTimeStamp;
      this.orderParams.endDate = this.endTimeStamp;
      if (this.time == "请选择预约时间") {
        this.popupVisible = false;
        var today = new Date();
        this.startTimeStamp = new Date(
          `${today.getFullYear()}/${today.getMonth() +
            1}/${today.getDate()} 14:00`
        ).getTime();

        this.endTimeStamp = new Date(
          `${today.getFullYear()}/${today.getMonth() +
            1}/${today.getDate()} 15:00`
        ).getTime();

        this.time =
          new Date(this.startTimeStamp).getMonth() +
          1 +
          "月" +
          new Date(this.startTimeStamp).getDate() +
          "日" +
          " " +
          new Date(this.startTimeStamp).getHours() +
          ":00" +
          "-" +
          new Date(this.endTimeStamp).getHours() +
          ":00";
      }
    },
    confirmCategory() {
      console.log(2222);
      this.popupVisible1 = false;
      this.popupVisible = false;
      this.categoryList.map((item, index) => {
        if (item.categoryName == this.categoryName) {
          this.categoryList.splice(index, 1);
        }
      });
      this.categoryList.push({
        categoryName: this.categoryName ? this.categoryName : "塑料",
        weight: this.weight ? this.weight : "0-5kg",
      });
      this.categoryName = this.categoryName ? this.categoryName : "塑料";
      this.weight = this.weight ? this.weight : "0-5kg";
      this.orderParams.recycleDetails.map((item, index) => {
        if (item.split(" ")[0] == this.categoryName) {
          this.orderParams.recycleDetails.splice(index, 1);
        }
      });
      this.orderParams.recycleDetails.push(
        this.categoryName + " " + this.weight
      );
    },
    categoryWeightClick(e) {
      var target = e.target || e.srcElement;
      var parentEle = target.parentElement;
      var children = parentEle.children;
      for (var item of children) {
        item.classList.remove("current");
      }
      target.classList.add("current");
      this.weight = target.innerHTML;
    },
    dateClick() {
      this.popupVisible = true;
      var today = new Date();
      // 获取当前时间点的时间戳
      // this.timeStamp = new Date(
      //   `${today.getFullYear()}-${today.getMonth() +
      //     1}-${today.getDate()} ${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`
      // ).getTime();

      this.startTimeStamp = new Date(
        `${today.getFullYear()}/${today.getMonth() +
          1}/${today.getDate()} 14:00`
      ).getTime();

      this.endTimeStamp = new Date(
        `${today.getFullYear()}/${today.getMonth() +
          1}/${today.getDate()} 15:00`
      ).getTime();
    },
    onValuesChange(picker, values) {
      console.log(picker, values);
      var today = new Date();
      if (this.popupVisible == true) {
        if (values[0] == "今天") {
          this.startTimeStamp = new Date(
            `${today.getFullYear()}/${today.getMonth() +
              1}/${today.getDate()} ${values[1].split("-")[0]}`
          ).getTime();

          this.endTimeStamp = new Date(
            `${today.getFullYear()}/${today.getMonth() +
              1}/${today.getDate()} ${values[1].split("-")[1]}`
          ).getTime();
        } else {
          this.startTimeStamp = new Date(
            `${today.getFullYear()}/${values[0].split("月")[0]}/${
              values[0].split("月")[1].split("日")[0]
            } ${values[1].split("-")[0]}`
          ).getTime();

          this.endTimeStamp = new Date(
            `${today.getFullYear()}/${values[0].split("月")[0]}/${
              values[0].split("月")[1].split("日")[0]
            } ${values[1].split("-")[1]}`
          ).getTime();
        }

        this.orderParams.startDate = this.startTimeStamp;
        this.orderParams.endDate = this.endTimeStamp;
        // alert(new Date("2020/3/14 11:30:00").getTime());
        this.time =
          new Date(this.startTimeStamp).getMonth() +
          1 +
          "月" +
          new Date(this.startTimeStamp).getDate() +
          "日" +
          " " +
          new Date(this.startTimeStamp).getHours() +
          ":00" +
          "-" +
          new Date(this.endTimeStamp).getHours() +
          ":00";
      }
    },
    close() {
      this.popupVisible = false;
      this.startTimeStamp = "";
      this.endTimeStamp = "";
      this.time = "请选择预约时间";
      this.orderParams.startDate = this.startTimeStamp;
      this.orderParams.endDate = this.endTimeStamp;
    },
    close1() {
      this.popupVisible1 = false;
    },

    // cancel() {
    //   this.popupVisible = false;
    // },
    // confirm() {
    //   this.popupVisible = false;
    // },
    initDate() {
      var date = new Date();
      this.slots[0].values[1] =
        date.getMonth() + 1 + "月" + (date.getDate() + 1) + "日";
      this.slots[0].values[2] =
        date.getMonth() + 1 + "月" + (date.getDate() + 2) + "日";
      console.log(this.slots[0].values);
    },
    getAddressInfo(id) {
      console.log(id);
      this.$axios
        .get(`/wx/recycleAddress/${id}`, {
          params: {
            id,
          },
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500,
            });
          }

          this.addressInfo =
            res.data.subDistrict +
            res.data.communityName +
            res.data.villageName +
            res.data.address;
          this.addressInfo = this.addressInfo.slice(0, 10) + "...";
          console.log(res);
          this.orderParams.addressId = id;
        })
        .catch(() => {});
    },
  },
  created() {
    this.initDate();
    this.getAddressInfo(this.$route.query.id);
  },
  mounted() {
    window.onscroll = null;
  },
  watch: {
    "$route.path": function(newPath, oldPath) {
      if (newPath === "/online-booking" && oldPath == "/address-list") {
        this.initDate();
        this.getAddressInfo(this.$route.query.id);
      }
      if (newPath === "/online-booking" && oldPath == "/home") {
        window.onscroll = null;
        this.clear();
      }
    },
  },
  data() {
    return {
      time: "请选择预约时间",

      addressInfo: "请选择回收地址",
      categoryList: [
        // {
        //   categoryName: "塑料",
        //   weight: "0-5kg",
        // },
        // {
        //   categoryName: "金属",
        //   weight: "5-10kg",
        // },
        // {
        //   categoryName: "塑料",
        //   weight: "0-5kg",
        // },
        // {
        //   categoryName: "金属",
        //   weight: "5-10kg",
        // },
      ],
      orderParams: {
        openid,
        recycleDetails: [],
        imageUrl: "",
        consignee: "",
        mobile: "",
        addressId: "",
        memo: "",
        startDate: "",
        endDate: "",
      },
      categoryName: "",
      weight: "",
      show: true,
      src: "http://192.168.9.40:8081/#/online-booking",
      popupVisible: false,
      popupVisible1: false,

      startTimeStamp: "",
      endTimeStamp: "",
      slots: [
        {
          flex: 1,
          values: ["今天", "2月15日", "2月16日"],
          className: "slot1",
          textAlign: "right",
        },
        {
          divider: true,
          content: "-",
          className: "slot2",
        },
        {
          flex: 1,
          values: [
            "14:00-15:00",
            "15:00-16:00",
            "16:00-17:00",
            "17:00-18:00",
            "18:00-19:00",
          ],
          className: "slot3",
          textAlign: "left",
        },
      ],
    };
  },
};
</script>
<style lang="scss">
.online-booking {
  width: 100%;
  height: auto;
  padding: 0 0.9375rem /* 15/16 */;
  box-sizing: border-box;
  background-color: #f5f5f5;
  overflow: hidden;
  .recovery-detail {
    background-color: #fff;
    min-height: 9.375rem /* 150/16 */;
    margin-top: 0.9375rem /* 15/16 */;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.625rem /* 10/16 */;
    box-sizing: border-box;
    border-radius: 0.625rem /* 10/16 */;
    .title {
      font-weight: bold;
      font-size: 15px;
      color: #333;
      margin-top: 15px;
    }
    .content {
      color: #999;
      font-size: 12px;
      padding-left: 1.5625rem /* 25/16 */;
      padding-right: 1.375rem /* 22/16 */;
      box-sizing: border-box;

      text-align: center;
      width: 100%;
      height: auto;
      .category-list {
        list-style: none;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        li {
          width: 100%;
          height: 1.625rem /* 26/16 */;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.625rem /* 10/16 */;
          span {
            color: #333;
            font-weight: bold;
            font-size: 15px;
            &:nth-of-type(3) {
              display: inline-block;
              width: 1.3125rem /* 21/16 */;
              height: 1.3125rem /* 21/16 */;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
    button {
      border: none;
      outline: none;
      background-color: #3ba32a;
      width: 5rem /* 80/16 */;
      height: 1.5625rem /* 25/16 */;
      border-radius: 0.78125rem /* 12.5/16 */;
      color: #fff;
      font-size: 15px;
      font-weight: bold;
    }
  }

  .add-address,
  .recovery-time,
  .contacts,
  .contact-number {
    background-color: #fff;
    margin-top: 0.625rem /* 10/16 */;

    width: 100%;
    height: 3.75rem /* 60/16 */;
    // line-height: 3.75rem /* 60/16 */;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.9375rem /* 15/16 */;
    box-sizing: border-box;
    border-radius: 0.625rem /* 10/16 */;
    span {
      &:first-of-type {
        color: #333;
        font-weight: bold;
      }
      &:nth-of-type(2) {
        span {
          vertical-align: middle;
          color: #333;
          font-size: 13px;
          font-weight: bold;
          font-weight: 400;
          margin-right: 0.625rem /* 10/16 */;
          input {
            border: none;
            outline: none;
            font-size: 15px;
            color: #333;
            text-align: right;
            &::-webkit-input-placeholder {
              color: #333;
              font-size: 13px;
            }
          }
        }
        img {
          vertical-align: middle;
          width: 0.59375rem /* 9.5/16 */;
          height: 1.03125rem /* 16.5/16 */;
        }
      }
    }
  }

  .remarks {
    margin-top: 0.625rem /* 10/16 */;
    border-radius: 0.625rem /* 10/16 */;
    width: 100%;
    height: 11.25rem /* 180/16 */;
    textarea {
      outline: none;
      border: none;
      width: 100%;
      height: 100%;
      border-radius: 0.625rem /* 10/16 */;
      padding: 25px 16px 0;
      box-sizing: border-box;
      color: #333;
      font-size: 15px;
      &::-webkit-input-placeholder {
        color: #999;
        font-size: 13px;
      }
    }
  }

  .upload-file {
    margin-top: 0.625rem /* 10/16 */;
    border-radius: 0.625rem /* 10/16 */;
    // width: 7.5rem /* 120/16 */;
    width: 100%;
    height: 7.5rem /* 120/16 */;
    background: #fff;
    position: relative;
    overflow: hidden;
    border: 5px solid #fff;
    box-sizing: border-box;
    .show-img {
      width: 100%;
      height: 100%;
      border-radius: 0.625rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.625rem;
      }
      position: relative;
      .after {
        position: absolute;
        right: 3px;
        top: 3px;
        font-size: 18px;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
      }
    }
    .add-img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      img {
        width: 2.1875rem /* 35/16 */;
        height: 2.1875rem /* 35/16 */;
      }
      span {
        font-weight: bold;
        color: #333;
        font-size: 15px;
      }
    }
    .btn {
      position: relative;
      left: 0;
      display: inline-block;
      text-align: center;
      color: #fff;
      text-decoration: none;
      // width: 80px;
      // height: 32px;
      width: 100%;
      height: 100%;
      line-height: 32px;
      // background: #409eff;
      border-radius: 3px;
      font-size: 12px;
      vertical-align: middle;
      // margin-left: 10px;
      border-radius: 0.625rem /* 10/16 */;
    }
    input[name="file"] {
      opacity: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
    }
  }

  .btn {
    margin-top: 0.625rem /* 10/16 */;
    width: 100vw;
    height: 3.75rem /* 60/16 */;
    line-height: 3.75rem /* 60/16 */;
    background-color: #fff;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    left: -0.9375rem /* 15/16 */;
    button {
      border: none;
      outline: none;
      width: 21.25rem /* 340/16 */;
      height: 2.5rem /* 40/16 */;
      line-height: 2.5rem;
      text-align: center;
      border-radius: 1.25rem /* 20/16 */;
      color: #fff;
      background-color: #3ba32a;
      font-size: 15px;
      font-weight: bold;
    }
  }

  .mint-popup-bottom {
    width: 100%;
    border-radius: 20px 20px 0 0;
    .picker-toolbar {
      text-align: center;
      line-height: 40px;
      font-size: 15px;
      font-weight: bold;
      color: #333;
      position: relative;
      span {
      }
      img {
        width: 0.9375rem /* 15/16 */;
        height: 0.9375rem /* 15/16 */;
        position: absolute;
        right: 1.5625rem /* 25/16 */;
        top: 50%;
        transform: translate(0, -50%);
      }
    }
    .categorys {
      display: grid;
      grid-template-rows: 2.5rem /* 40/16 */ 2.5rem /* 40/16 */;
      grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
      justify-items: center;
      align-items: center;
      grid-auto-flow: row;
      padding-bottom: 1.0625rem /* 17/16 */;
      // border-bottom: 0.1px solid #ddd;
      box-sizing: border-box;
      span {
        &.current {
          border: 1px solid #3ba32a;
          color: #3ba32a;
          background-color: #fff;
        }
        width: 6.25rem /* 100/16 */;
        height: 2rem /* 32/16 */;
        line-height: 2rem;
        text-align: center;
        background-color: #eeeeee;
        border-radius: 0.3125rem /* 5/16 */;
        font-size: 15px;
        color: #333;
        font-weight: bold;
      }
    }

    .weight {
      // position: relative;
      &::before {
        content: "";
        display: block;
        height: 0;
        width: 21.75rem /* 348/16 */;
        border-top: 0.1px solid #ddd;
        margin: 0 auto;
      }
      .weight-grids {
        margin-top: 1.5625rem /* 25/16 */;
        display: grid;
        grid-template-rows: 2.5rem /* 40/16 */ 2.5rem /* 40/16 */;
        grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
        justify-items: center;
        align-items: center;
        grid-auto-flow: row;
        padding-bottom: 1.0625rem /* 17/16 */;
        // border-bottom: 0.1px solid #ddd;
        box-sizing: border-box;
        span {
          &.current {
            border: 1px solid #3ba32a;
            color: #3ba32a;
            background-color: #fff;
          }
          width: 6.25rem /* 100/16 */;
          height: 2rem /* 32/16 */;
          line-height: 2rem;
          text-align: center;
          background-color: #eeeeee;
          border-radius: 0.3125rem /* 5/16 */;
          font-size: 15px;
          color: #333;
          font-weight: bold;
        }
      }
    }

    .button {
      width: 100vw;
      height: 3.75rem /* 60/16 */;
      line-height: 3.75rem /* 60/16 */;
      text-align: center;
      box-sizing: border-box;
      margin-top: 1.25rem /* 20/16 */;
      button {
        border: none;
        outline: none;
        width: 21.25rem /* 340/16 */;
        height: 2.5rem /* 40/16 */;
        line-height: 2.5rem;
        text-align: center;
        border-radius: 1.25rem /* 20/16 */;
        color: #fff;
        background-color: #3ba32a;
        font-size: 15px;
        font-weight: bold;
      }
    }
    .picker {
      .picker-items {
        .picker-slot.picker-slot-right {
          text-align: center !important;
        }
        .picker-slot.picker-slot-left {
          text-align: center !important;
        }
      }
    }
  }
}
</style>
